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Ingénieur étude et conception ch 
bebook™ 
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Etudes 




Polytech'Nice-Sophia 



Filière : Architecture logicielle 

Options : CLAW, Web sémantique, BD 
avancées, Crypto/Sécurité, algo. avancée 
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Expérience 




+ lan de Flex/Air 



Utilisation avancée 



Dialogue fréquent avec des professionnels 
et experts FI ex 

Participation à des événements dédiés 
Veille quotidienne 
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Voyage au monde des RIA 



Un peu d'histoire 



> Définition et classification des RIA 
* Les technologies RIA 

> Conclusion 

Flex in a nutshell 



Evolution des Desktops 





945 : Batch System 



II. 1955 : Interface orientée ligne 
965 : Plein écran # 2D * 



IV. 1 980 : Interface utilisateur graphique 

V. 1995 : Nouvelle génération +3D 




Evolution du web 



Collaboration 




Intelligence 

b4.0 

Mobilité Universel 
Application Ubiquité - 
Convergence Sémantique 
3#0 Accessibilité WebOS 

Réseau social Widget 
Folksonomie Mash-up Microformat 
Communauté Partage Ecriture Contribution 
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API Standardisation Publicité Gratuité 
Dynamique Communication Identité numérique Design 
Interactivité Wiki Blog 
Annuaire Forum Pages perso 
Document Lecture Site web 
Personnel 
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Rich 

Internet Application 
(embarqué dans le 
navigateur) 
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RDA 
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Desktop 





RDA 





Rich Desktop 
Application 
(standalone) 





RIA 



m 



yf Bonne exploitation % 
des ressources % 
yf Déconnecté 1 
yf Confidentialité des données 
yf Continuité du contexte 
yf Gestion/affichage possible d 
grandes quantités de données 
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RDA 



RIA 



^/Pas d'installation/update 
yf Portable 

yf Fortement connecté 
yf Traçage de l'utilisateur 
possible 

</Pas de piratage de licence 




Pas de serveur 



Logique de 
présentation 



Logique 
business 




Données 
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âge web stati 
Pas interactif 




resentatio 




RIA 



Client louro 



Logique de 
présentation 



Expérience ^'Cation) 



utilisateur similaire a 



des Desktop 







RIA 
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Client lourd Hybride 




Desktop 



Logique de 
présentation 



Partionnement de la 



logique business 




Logique de 
présentation 



Logique de 
présentation 




RIA 

(Rich Internet Application' 




Client lourd Hybride 



Partionnement de la 



Hybride logique de présentatio 




Client lourd 



(Rich Ip 



Hybri» 



Desktop 



Logique de 
présentation 



Seul le moteur de 
présentation est coté 
client 



Client léger ! 



Logique de 
présentation 



Logique de 
présentation 



Moteur de 
présentation 





Client 
lourd 




Applications 
natives 



Air, 
JavaFX 




Nom : Silverlight 

Editeur : Microsoft 

Date de création : avril 2007 



Ide : Visual Studio + 
Expression Bend 

Signes particuliers : 

►Non compatible Linux 

►Moonlight 
►Non compatible Opéra 
►Version mobile en 2009 
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Licence : Propriétaire 
Langages : XAML / .net 
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Slider 
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MS Expression Bend 
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Fx 



à 



: Flex 



Edi 




: Adobe 



Date de création : mars £004 




Licence : Open source 
/Propriétaire 

Langages : MXML 
/ActionScript 3 



Ide : Adobe Flex Builder 
(plugin Eclipse) 

Signes particuliers : 

►Repose sur Flash 
►Flex 4 en 2009 
►Adobe Air (Desktop) 
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Flex Development - LastFmWidget/src/UstFmWidget.mxml - Eclipse SDK - /Users/camille/Documents/workspace 
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▼ t9 src 
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A mx Label 
▼ Common 
ID 
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f Style 
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Adobe Flex Builder 
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Editeur : Fondation Mozilla 



Licence : Format ouvert 



Langages : XUL/HTML 

/CSS/DOM/Javascript 

/XML 




Ide : Plusieurs IDE 
disponibles 

Signes particuliers : 
►Prononcer "zoul" 
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: JavaFX 



Editeur : Sun Microsystems 

Date de création : mai £007 



Licence : Propriétaire 

Langages : Java 
/JavaFX script 



Ide : Netbeans + plugin 

Signes particuliers : 

►Langage de script, wrap 
de Swing et Java 2D/3D 
►JavaFX 1.0 sorti le 4 
dec 2008 
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Java Swing 




JavaFX Script 



import javax.swing.JFrame; 
import javax.swing.JLabel; 
import javax.swing.SwingUtilities; 

public class FrameApplication { 

public static void main(String[] args) { 
SwingUtilities.invokeLater(new Runnable() { 
public void run() { 
JFrame win = new 
JFrame("My Java Application"); 
win.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
win.setSize(500, 300); 
JLabel label = new JLabel("Hello World!"); 
win.add(label); 
win.setVisible(true); 



import javafx.ui.*; 
Frame { 

title: "My Java Application' 

width: 500 

height: 300 

content: Label { 
text:"Hello World!" 

visible: true 

} 



} 
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O DisplayShelf - NetBeans IDE 6.5 
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File Edit View Navigate Source Refactor Run Debug Profile Versioning Tools Window Help 
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Projects 



<D x files 



B [£>} DisplayShelf 

©••IqH Source Packages 
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DisplayShelf. fx 
Item.fx 
g Main.fx 
+ displayshelf. photos 
© l^g Libraries 
- DisplayShelfMobile 
©••(cà Source Packages 
3-"S§ displayshelf 

DisplayShelf. fx 
Item.fx 
Main.fx 
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© Libraries 
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1?^?Q Si £l 9 □ Cl J 



I Enable Preview (Alt+Shif t+P) | 

function doLayout { 



T3Ï 



É 

□ 



var s t ar t Keyf r ames : KeyFr aine [ ] ; 
var endKeyf rames : KeyFrame [] ; 
var dur^tion = 0.5s; 



for (n in content) { 

var it = n as Item; 

insert KeyFrame ( time: Os values: [ 
n.translateX => n. translateX, 
n.scaleX => n.scaleX, 
n.scaleY => n.scaleY, 
it. angle => it. angle, 
] } into startKeyf rames; 

} 



Design Preview (tain f *] 
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Awjfc^Mi Vie* Help 

Phone HKém 123456789 




Item; 

ft . content . sise () *spacing + 
me { time: durât ion values: 
IlislateX => newX, 
IlleX ■> scaleSmall, 
ILeY => scaleSmall, 
jble => 45 
I sndKeyf rames ; 
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Stage CustomNode \_Jf Scène 

R Actions 
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onMouseReleased 
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onMouseExited 
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~"Ç) onMouseDragged 



.jfi onMouseWheelMoved \Lj onKeyPressed 
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- Basic Shapes 
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' Image f Line 

\fi Polyline Q Rectangle 

R Transformations 
© Rotate §fj! Scale 

± Colors 

- Animation 

^ Timeline [Q[ KeyFrame 
Action 

- Swing Components 
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ComboBox ComboBoxItem 

label Label 0 RadioButton 

Slider (O TextField 

1 1 1 ToggleButton 
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^Text 

<$> Translate 
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Netbeans + plugin JavaFX 
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Titaiiium? 




titanium 




Popularité 




Pénétration du marché 



Microsoft Silverlight 




Version I 
Version 2 
Non installé 



Adobe Flash Player 




Version 9 
75% 



Version 9 
Version 10 
Non installé ou < 9 




Source : riastats.com 



Points communs 



Multi-plateformes (grâce à un player) 



I langage de description du Ul + I langag 
de programmation 

Programmation orientée événement 

Ul riches 



Connectés : REST, SOAP, AMF, ... 
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Critères de choix 



Type d'application 




Public visé 





Utilisations avancées désirées (3D, son, 
vidéo...) 

Performance / complexité de l'application 
Rendu graphique 



Communauté 





Fx 



Flex/Air in a nutshell 
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Flex in a nutshell 

> Qu'est-ce que Flex? 

> Les langages 

• Actionscript 3 

• MXML 

> Culture Flex 

> Retour sur expérience 

> Ressources 




Qu est-ce que Flex? 



Un moyen de faire des SWF 



C'est pour les développeurs 



1m 




Cela permet de faire des applications 
sur le web (Flex) 
et sur desktop (AIR) 



Histo 



Flex 1 .0 : mars 2004 




Flex 1 .5 : octobre 2( 




Flex 2.0 . juin 2006 
Flex 3.0 : février 20C 




Flex 4.0 ("Gumbo") 





Les langages 
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MXML 



Description de l'interface 
+ logique business 



+ connexion à des webservi 



Basé sur XML 





Intégré avec TAS : syntaxe { 





A 



ActionScript 3.0 



Norme ECMAScript 4.0 (draft édition) 









Proche de Java et JavaScript 
Orienté objet 

Typé (mode strict par défaut) 
Pseudo-compilé 
Dynamique (dynamic class) 
Réflexif 




"The power of the ActionScript language tools along with the hybrid type 

checking (mostly static for tool support in Flex Builder, but dynamic 
whenever ifs convenient) makes for a programming expérience that I fmd 

much more straightforward and pleasing than Java." 



Bruce Eckel 



Auteur de "Thinking in Java" 



Flex in a nutshell > Les langages 



Runtime 



Langage pseudo-compilé (byte code) 
Compilation à la volée (Just In Time Compilation) 



Monothreade 



Ramasse-miette 



ActionScript 3 





var variable:String; 



var variable:String = "Ma chaîne"; 





• const CONSTANTE:String = "ma chaîne"; 



Quelques types de base 



Types primitifs 


Types complexes 


Boolean 


Object 


int 


Array 


Null 


Date 


Number 


Error 


String 


Function 


uint 


RegExp 


void 


XML 




XMLList 



■ K 
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Traitement 



conditionne 



trace( M < 0"); 




else if (entier == 0) 
{ 

trace("= 0 H ); 



else 



trace("> 0"); 
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Traitement 



conditionne 




var entierrString = "5"; 
switc h (entier) 

{ 



case "5": 

trace("le nombre est 5"); 
break; 

il ✓ il 

case 6 : 

trace("le nombre est 6"); 
break; 
default: 

trace("le nombre est différent de 5 et 6"); 




Boucles 



#51 



l l I k.i. » ■ I . » ' , ■ » * ■ ■ *' - 



for(var iruint ; i< 1 0 ; 



trace(i); 





var i:uint = 



while(i<IO) 



trace(i); 



Boucles 
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Boucles 



var i:uint= I 
do 

{ 

trace(i); 
i++; 

} 

while(i<IO); 
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Boucles 



var tableau:Array = new Array("un","deux","trois"); 
for(var p:* in tableau) //itère sur les index 



trace(p + :: + tableau [p]); 




for each (var p:* in tableau) //itère sur les valeurs 

{ 

trace(p) 

} 



r 



Programmer avec classe 



package com.camilleroux.flex 
import mx.control.Button; 




public class MicroOnde extends Device implements IMicroOnde 



protected var temperature:Number; 



public function MicroOndeQ 



public function start():void 
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Programmer avec classe 



package o 



nportation de classes et 
iterfaces 




import mx.control.Button; 



public class MicroOnde extends Device implements IMicroOnde 



protected var temperature:Number; 



public function MicroOndeQ 



public function start():void 




Programmer avec classe 



package^ internai : visible que 
{ dans son package 

imporc public : visible par tous 





public class MicroOnde extends Device implements IMicroOnde 




protected var temperature:Number; 
public function MicroOndeQ 



public function start():void 
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Programmer avec classe 



package c 



+ final : ne peut 
*e étendue 




c 

+ dynamic : possibilité de lui ajouter 



import m> 



des attributs et méthodes au 
runtime 



public class MicroOnde extends Device implements IMicroOnde 



protected var temperature:Number; 



public function MicroOndeQ 



public function start():void 



Programmer avec classe 



package com.carr' •internai (par défaut) 
{ •public 
i m port mx. «protected 




y* i i tu 

public class M • + static 

protected var temperature:Number; 
public function MicroOnde() 

{ 
} 

public function start():void 



<* n ts iMicroOnde 



r 



Programmer avec classe 



package com.camilleroux.flex 




import mx.control.Button; 



public class Micr^ - îr e implements IMicroOnde 

{ •internai (par défaut) 

protec •public 
•protected 



public •private 



• + static 



public function start() 



:void 
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Interface 



package com.camilleroux.flex 




public interface IMicroOnde 



function start():void; 




public function get maVariable():Type 



public function set 
maVariable(value:Type):void 



MXML 






Hello World 



Du vrai XML 



<?xml version=" 1 .0" encoding="utf-8 l, ?> 

<mx:Application xmlns:mx='' http://vyww.adobe.com/2006/mxmr ' 
<mx:Panel width="200" height="200"> 
<mx:Button label="Hello world7> 
</mx:Panel> 



</mx:Application> 




Hello World 



Base de tout 

<?xml vers, document mxml 0 ding= ,, utf-8"?> 

<mx:Applkatioi i ™ i iins:mx='' http://vyww.adobe.com/2006/mxmr f 
<mx:Panel width="200" height="200"> 
<mx:Button label="Hello world7> 
</mx:Panel> 



</mx:Appli cation > 



Hello World 



<?xml version=" 1 .0" encoding="utf-t nomt 
<mx:Application xmlns:mx=" http.7/vvww.cuj 
<mx:Panel width="200" height="200"> 
<mx:Button label="Hello world7> 
</mx:Panel> 



</mx:Application> 



Espace de 
nommage 



e.com/2006/mxml" 



Hello World 



<?xml version=" 1 .0" encoding="utf-8 l, ?> 

<mx:Application xmlns:mx='' http://vyww.adobe.com/2006/mxmr ' 
<mx:Panel width="200" height="200"> 

<mx:Button label="Hello world7> ^m^^^^^^^ 
</mx:Panel> 



</mx:Application> 

mx:Button 




Etudions un exemple 



<?xml version-' 1 .0" encoding="utf-8"?> 

<mx:Appli cation xmlns:mx=" http://www.adobe.com/2006/mxmr f > 
<mx:Panel width="200" height="200"> 
<mx:Textlnput id="input7> 
<mx:Label text="Texte : {input.text}"/> 
<mx:Button label="Reset" click= ,, {input.text= , '}"/> 
</mx: Panel > 
</mx:Application> 




Etudions un exemple 



Composant 
MXML 



-■JP^^^^utf-8"?> 

m xmlns:mx=" http://www.adobexom/2006/mxmr f > 
width="200" height="200"> 
îput id="input7> 
text="Texte : {input.text}"/> 
■ label="Reset" click="{input.text= , , }"/> 



<?xml version= 



lillWsl 




<mx: fl 



<mx:r 
<mx: 
<mx: 
<mx: 
</mx: Panel > 
</mx: Ap p I i cat i o n > 






Etudions un exemple 



<?xml version-' 1 .0" encoding="utf-8"?> 

<mx:Appli cation xmlns:mx=" http://www.adobe.com/2006/mxmr f > 
<mx:Panel width="200" heigp id 00"> 
<mx:Textlnput id="input7> 
<mx:Label text="Texte : {input.text}7> 
<mx:Button label="Reset" click= ,, {input.text= , '}"/> 
</mx: Panel > 
</mx:Application> 




Etudions un exemple 



<?xml version="I.O" encoding="utf-8"?> | 
<mx:Appli cation xmlns:mx=" http://www.a 
<mx:Panel 

<mx:Textlnput id="input7> 
<mx:Label 



Propriété 



>/mxmr> 




<mx:Button 
</mx: Panel > 
</mx:Application> 




click^input.text^ , }7> 




Etudions un exemple 



<?xml version- 1 1 .0" encoding="utf-8"?> ^^^^^ 
<mx:Appli cation xmlns:mx=" http://www.ado * 

<mx:Panel width="200" height="200"> Binding 
<mx:Textlnput id="input7> 
<mx:Label text="Texte : {input.text}7> 
<mx:Button label="Reset" click="{input.text= , '}"/> 
</mx: Panel > 
</mx:Application> 



ixml"> 




Etudions un exemple 



<?xml version- 1 1 .0" encoding="utf-8"?> ^^^^^ 
<mx:Appli cation xmlns:mx=" http://www.ado * 

<mx:Panel width="200" height="200"> Binding 
<mx:Textlnput id="input7> 
<mx:Label text="Texte : {input.text}7> 
<mx:Button label="Reset" click="{input.text= , '}"/> 
</mx: Panel > 
</mx:Application> 



ixml"> 




Etudions un exemple 



<?xml version-' 1 .0" encoding="utf-8"?> 

<mx:Appli cation xmlns:mx=" http://www.adobe.com/2006/m xrr>r f > 
<mx:Panel width="200" height="200"> 

<mx:Textlnput id="input7> Evénement 

<mx:Label text="Texte : {input.text}7> ^P^^H 

<mx:Button label="Reset" click="{input.text- '}j7> 
</mx: Panel > 
</mx:Application> 
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Génère de TAS 





MXML vers Action Script 3 
CSS vers ActionScript 3 
ActionScript 3 vers Byte code 
As sets vers SWF 
Byte code vers SWF 



Execution du SWF sur Flash Player 







H I 



Les Evénements 




<mx:Button label =l, show" click="{Alert.show( , event , )}7> 




<mx:Script> 
<![CDATA[ 



import mx.controls.Alert; 




private function showAlert(event:Event):void 



Alert.show('event') 




</mx:Script> 



<mx:Button label="show" click="showAlert(event)7> 



<mx:Script> 
<![CDATA[ 



import mx.controls.Alert; 

private function showAlert(event:Event):void 



Alert.show('event') 



]]> 

</mx:Script> 

<mx:creationComplete> 
<![CDATA[ 

bouton.addEventListener(MouseEvent.CLICK, showAlert); 



]]> 

</mx:creationComplete> 



<mx:Button id="bouton" label="show"/> 



<mx:Textlnput id= 
<mx: Label text="~ 




- mput /> 
texte : {input.text}"/> 




<mx:Script> 
<![CDATA[ 
[Bindable] 

private var bindrString; 

]]> 

</mx:Script> 





<mx:Textlnput id="input" change="{bind=input.text}7> 
<mx:Label text="Texte : {bind}7> 




<mx:creationComplete> 



<![CDATA[ 



BindingUtils.bindProperty(lab,"text",input,"text"); 
]]> 

</mx:creationComplete> 



<mx:Textlnput id="input7> 
<mx:Label id="lab7> 




■ . .. I 



■ 



* ■ 



i 
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Flex in a nutshell > Les langages > Les états 

Exemple 



<mx: states > 



<mx:State name="monEtat ll > 

<mx:SetProperty target="{views} 11 

name="selectedlndex" value="2" /> 
<mx:RemoveChild target="{backButton}" /> 
</mx:State> 
</mx:states> 



Chaque composant possède une variable currentState qui contient 
l'étant courant. Il suffit de le modifier pour le changer d'état. 
L'état par défaut a pour valeur "". 






Actions possibles 



SetProperty 



AddChild 



RemoveChild 



SetEventHandler 



SetStyle 



Modules et RSL 



0 



4-— 




MX ■ 4»» 



§3i *•* 



m l 



ma 



■^vrr, A 1 »t 





Chargement 
dynamique 




module I .swf 



module2.swf 




Library I .swf 



Library2.swf 



1 



§ 



Library I .swf 



Library2.swf 





Application 
principale 
main.swf 



r 



module2.swf 




module3.swf 



ine ai 



application 
main2.swf 




i 



r 



Quoi de plus dans AIR? 



H . ■ I : I I " I - »' I 



Accès au système 
de fichier 

Processus en 
tâche de fond 



Ul natif 
(fenêtres et menus) 



PDF 



SQLite 



WebKit 



API pour les 
mises a jour 



Stockage local 



Monitoring de la 
connexion réseau 



Contrôle du 
chrome 



Système de notification 




Il • 



Installation d'une 
application AIR 




Register/Sign In 
Navigation 

Contact Us 

Ho* To Po* îtems On 
Ftex.org 



Tour de Flex 

Tour de Rcx lié 
data intégration, m 



âppttcjftjon for expéonnQ P 
as a vanery of tnrd party 



rtcxwang tne cor* Rai 
and mon». 



AIR and 



The RIA Buzz 




7 ou^ K 
> 

FLEX* 



Stay cumant *ith tne latast 
new» for Adobe Fie», Adobe AIR 
end mor* msm tne MMl of 

iMmti 



Tour da Flex ha* tf>re« prtmery purpoMs: 

Prowde non-^te» devetopens wt* a good 



of *n»t «s 



m Flex m a 



Ségn up for tna i 

For Students 

Get Flex Buikter n*EE< 

Useful Links 

Adoba Flex Product Page 



fWr» i ^— » I —i im é « ri 1 1 - » ^ n r fi n «mi iw aii il r> - 



Tour de Ha* moudes ove* 200 njnnab** 




è pièce to 



wtn aourta coda, enks to documentation, and otnar datais Topes mdude tne 
Oood APU, Data Viiuelizetion, Meppmg, and a growmg œOector c/ 



7- MM 



Search 



Upcoming Events 

Adoba r lex Jumpstart Oas 

Mon, 12/08/2004 09:30 • 
16:30 

Fie» 3 • Davaftopffg R*» 
Oient Appiocon* 

Mon, 12/08/2008 09:00 « 
Wed, 12/10/2008 16:00 
flaKughn-Ma*ta>g 
(0812.06): Florli 
• nina Taatmg ma FiexUn*- 
Mon, 12/08/2006 19:30 - 
21:30 

Flex 3 ■ Extendaig and 
Styimg Componeots 
Tua, 12/09/2008 09:00 - 
Wed. 12/10/2006 16:00 
Fie* Camp Otfe 2008 
Wed. 12/10/2008 09:00 - 
10:00 

Flex 3 and LCOS ■ 
Inteoratmg wrtn Data and 



Tn g , 12/11/2006 09:00 ■ 
Mi 12/12/2006 16:00 
Flax 3 i Boadmg Oertmg à 
Deanboerd Appacationt 



Ou 



FLEX 




installation de l'application 




installation de l'application 




Voulez-vous vraiment installer cette application 
sur votre ordinateur? 



xè% fyttèfiw UJMTTI 




m* pttfl MMMf mQut *t técurft* pour vout- 



(V) Accé% vfttémm t,UMTTl 



de l'application 





Urt *00*-ll-tO 7 



Adobe Flash Platform and web technologies 




TOOLS TO DbSIGN AND DbVfcLOP 




FRAMEWORK 



Flash CS4 
Professional 



:fxg 



Flash Catalyst 



FX Flex 






Browsers 










Flash Player 






1 H.264 Video 











OPERATING SYSTEM 



NETWORK 





A M F, XML. JSON, SOAP. RSS, ATOM, etc. HTTP/S, Sockets. RTMP. etc. 



FLASH SERVERS 






Flash Media 


BlazeDS 


Server Family 




RESOURCE TIERS 



ADOBE SERVERS 

Cf 



LiveCycle ES 



THIRD PART Y SERVERS 



php 

Java 






Retour sur expérience 



Api parfois minimalistes 



Architecture (MVC + structure par 
composants) 



DE incomplet 



Communauté active 




• Scroll sous Mac OS 



Temps de compilation parfois long 



Machine virtuelle à optimiser 



Développement rapide du Ul 





Liens à connaître 



Flex Language Référence ( http://iivedocs.adobe.eom/fiex/3/ 



l angref/ ) 



FleX reSSOUrceS ( http://wvwv.adobe.com/support/docunnentation/en/ 
flex/) 

FleX in a Week ( http://www.adobe.com/devnet/flex/videotraining/ ) 
Vidéos et tutoriels pour apprendre Flex en I semaine 

FleX.Org ( http://f1ex.org/ ) 

Agrégation d'actualités provenant de la sphère FlexIAir 



• TourDeFleX ( http://flex.org/tour ) 

RDA en Air pour explorer des ressources et des composants Flex 



QH 7V /lex 
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Search » Fllter Q 



Data Visualization 



► Q]1L0G Ellxlr 
Y Ë^Kap 1T Lab 
j Dlagrammer 
Klvlat(Radar Chart) 



i^j TreeMap 
^ visualizer 



J 



Visualizer is a cata visualization Hex 

conponent. 

Author: Kap IT 

Date Added: 2008-09-10 



Visualizer 



Comment s (1) 



^4 



e 



Visible levels : 

■ ■ • 



Orientation 



Top to Bottonr ▼ 



e 



r 



Link drawing type 

Orth. polyline 



I- powered 




TDf-visuahzer. 



Open in Browser ™ Expand 



Hlerarchlcal Balloon Radial 


Hlerarchlcal Cycllc 


Click on + to expand or Roll over a person to 
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CustonCount... 


Lang Ref 


Proûuct guide 


Conponent H... 



About Kap 



k?xml version-" 1.0" encoding- M utf-8 M ?> 
KTDF : TDFApplication 

xmlns :mx=" ht tp: / /www. adobe.com/2006/2axml " 

xmlns : component="f r . kapit • tourdeflex • component • * 1 

xmlns : TDF-" f r . kapit . tourdeflex . * " 

xmlns :visualizer=" corn, kapit • visualizer . * " 

layout="absolute M 

backgroundColor="#F7F7F7" 

> 



This application demonstrates how to use Visualizer component to display Hierarchica 



— > 



<mx: Style source^" . . /. . /TDFStyle/src/TDFStyle • css ■ /> 



mu 



r 



Frameworks 



Cai rngOrm ( http://opensQurce.adobe.com/wiki/display/cairngoriTi 



PureMVC r http://puremvc.org/ ;) 
Mate ( http://mate.asfusion.com/ ) 




• Architectures et Framework Flex / Air 

par Matthieu Segret 

http://techtalksJntellicore.net/2008/05/29/architectures-frameworks-flex/ 



Frameworks 



cairngorm flex WM 

puremvc flex MA 

mate flex 12 

guasax flex 10 
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Source : Google Insights (décembre 2008) 




• Flexlib ( http://code.google.eom/p/flexlib/ ) 
Composants graphiques 



• Dégrafa r http://www.degrafa.org /^ 
Framework graphique 




exunitlib/ ) 



/p/flash-thunderbolt/ ) 



Flex in a nutshell > Ressources 

Merapi 




ADOBE AIR 




MF Merapi 



Java 



Communication par message entre AIR et JAVA 



http://merapiproject.net / 



Sources 



Rich Internet Applications (RIA): A Convergence 
of User Interface - Florian Moritz 

httD://www.f lomedia.de/diDloma/documents/DiDlomaThesisFlorianMoritz.Ddf 



Flash, Flex & AIR: A brief survey - Travis Isaacs 



httD://www.slideshare.net/tbisaacs/flash-flex-air-a-brief-surve 



VÂ 



Pratique d'ActionScript 3 - Thibault Imbert 

httD://DratiaueactionscriDt3.bytearray.or _ 



AdvancED Flex 3 - Shashank Tiwari & Elad Elrom 




Illustrations 



httD://www.flickr.com/Dhotos/5amin/3830033 1 7/ 



httD://www.flickr.com/Dhotos/katei/2326033 1 02/ 



h ttD://www.f I i c kr.co m/p h otos/su stty/95 3 789 3 71 



httD://www.flickr.com/Dhotos/stuckincustoms/2049233526/ 



httD://www.flickr.com/Dhotos/chris zin/2 1 97585 1 53/ 
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httD://www.f lickr.com/Dhotos/D2oyette/94520 121/ 



h ttD://www.f I i c kr.co iti/d h otos/gu stty/95 3 789 3 7/ 



